<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-button size="mini" type="primary" @click="changeIsAdd" style="margin-bottom: 5px">新增接口</el-button>
        <el-tree
          :props="props"
          :data="rows"
          node-key="id"
          draggable
          :highlight-current="true"
          :accordion="false"
          :default-expand-all="false"
          :expand-on-click-node="false"
          @node-click="changeIsUpdate"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
        />
      </el-col>
      <el-col :span="12">
        <el-form
          v-if="isAdd !== undefined"
          ref="form"
          label-width="120px"
        >
          <el-form-item label="菜单名称">
            <el-input v-model="row.name"/>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="row.path"/>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="row.description"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAll">
              <span v-if="isAdd">
                新增
              </span>
              <span v-else>
                修改
              </span>
            </el-button>
            <el-button v-if="!isAdd" type="danger" @click="del">
              删除
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { saveAll, list } from '@/api/permission'
import { commonDel, commonList, commonSaveAll } from '@/utils/common'

export default {
  name: 'Permission',
  data() {
    return {
      isAdd: undefined,
      rows: [],
      props: {
        label: 'name',
        children: 'children'
      },
      row: {}
    }
  },
  beforeMount() {
    this.resetForm()
    this.list()
  },
  methods: {
    changeIsAdd() {
      this.isAdd = true
      this.resetForm()
      this.row.sort = this.rows[this.rows.length - 1].sort
    },
    changeIsUpdate(menu) {
      this.row = menu
      this.isAdd = false
    },
    async saveAll() {
      await commonSaveAll(this,saveAll,this.list)
    },
    del() {
      commonDel(this)
    },
    list() {
     commonList(this.rows,list)
    },
    resetForm() {
      this.row = {
        id: '',
        name: '',
        path: '',
        description: '',
        children: []
      }
    },
    handleDragStart(node) {
      console.log('drag start', node)
    },
    handleDragEnter(draggingNode, dropNode) {
      console.log('tree drag enter: ', dropNode.label)
    },
    handleDragLeave(draggingNode, dropNode) {
      console.log('tree drag leave: ', dropNode.label)
    },
    handleDragOver(draggingNode, dropNode) {
      console.log('tree drag over: ', dropNode.label)
    },
    handleDragEnd(draggingNode, dropNode, dropType) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    },
    handleDrop(draggingNode, dropNode, dropType) {
      let draggingNodeData = draggingNode.data
      let dropNodeData = dropNode.data
      if (dropType == 'inner') {
        let temp = JSON.parse(JSON.stringify(dropNodeData))
        temp.children = undefined
        draggingNodeData.parent = temp
      } else {
        draggingNodeData.parent = dropNodeData.parent
        if (dropType == 'after') {
          draggingNodeData.sort = dropNodeData.sort + 1
        } else if (dropType == 'before') {
          draggingNodeData.sort = dropNodeData.sort - 1
        }
      }
      saveAll({ data: JSON.stringify([draggingNodeData, dropNodeData]) })
    }
  }
}
</script>

<style scoped>

</style>
